{{#>base title=data.page.slider}}

{{#*inline "pageContent"}}
    <div class="row">
        <div class="col-md-12">
            <h3 class="page-title">
                {{data.page.slider}}
            </h3>
            <div class="tabs-wrap">
                <ul  class="nav nav-tabs">
                    <li >
                        <a href="slider.html" >基础</a>
                    </li>
                    <li class="active">
                        <a href="slider-options.html" >参数说明</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">

            <div class="markdown">
                <pre><code class="html">$p.slider(Seletor, Options);</code></pre>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <h3>Options</h3>
            <hr>
            <table class="table-custom table table-hover table-fixed dataTable table-scrollable">
                <thead>
                <tr>
                    <th width="200">参数</th>
                    <th width="100">默认值</th>
                    <th width="100">数据类型</th>
                    <th>描述</th>
                </tr>
                </thead>
                <tbody>
                <tr class="options__step">
                    <td><mark>type</mark><div>data-type</div></td>
                    <td>"single"</td>
                    <td>string</td>
                    <td>选择一种类型,  <code>single</code> 设置一个值,  <code>double</code> 设置一个范围</td>
                </tr>
                <tr>
                    <td><mark>min</mark><div>data-min</div></td>
                    <td>10</td>
                    <td>number</td>
                    <td>设置最小值</td>
                </tr>
                <tr>
                    <td><mark>max</mark><div>data-max</div></td>
                    <td>100</td>
                    <td>number</td>
                    <td>设置最大值</td>
                </tr>
                <tr>
                    <td><mark>from</mark><div>data-from</div></td>
                    <td>min</td>
                    <td>number</td>
                    <td>设置左手柄（或单柄）的起始位置</td>
                </tr>
                <tr>
                    <td><mark>to</mark><div>data-to</div></td>
                    <td>max</td>
                    <td>number</td>
                    <td>设置右手柄的起始位置</td>
                </tr>
                <tr class="options__step">
                    <td><mark>step</mark><div>data-step</div></td>
                    <td>1</td>
                    <td>number</td>
                    <td>设置每一步滑动的值，对于0，可以是小数</td>
                </tr>

                <tr>
                    <td><mark>min_interval</mark><div>data-min-interval</div></td>
                    <td>—</td>
                    <td>number</td>
                    <td>当类型为double，设置最小范围值</td>
                </tr>
                <tr>
                    <td><mark>max_interval</mark><div>data-max-interval</div></td>
                    <td>—</td>
                    <td>number</td>
                    <td>当类型为double，设置最大范围值</td>
                </tr>


                <tr class="options__step">
                    <td><mark>values</mark><div>data-values</div></td>
                    <td>[]</td>
                    <td>array</td>
                    <td>设置可能的滑块值的数组，可以是数字或字符串。如果该值设置，min，max和step都无效。</td>
                </tr>

                <tr class="options__new">
                    <td><mark>from_fixed</mark><div>data-from-fixed</div></td>
                    <td>false</td>
                    <td>boolean</td>
                    <td>禁止拖动左手柄（或者单手柄）。</td>
                </tr>
                <tr class="options__new">
                    <td><mark>from_min</mark><div>data-from-min</div></td>
                    <td>min</td>
                    <td>number</td>
                    <td>设置左手柄拖动的最小值</td>
                </tr>
                <tr class="options__new">
                    <td><mark>from_max</mark><div>data-from-max</div></td>
                    <td>max</td>
                    <td>number</td>
                    <td>设置左手柄拖动的最大值</td>
                </tr>


                <tr class="options__new">
                    <td><mark>to_fixed</mark><div>data-to-fixed</div></td>
                    <td>false</td>
                    <td>boolean</td>
                    <td>禁止拖动右手柄。</td>
                </tr>
                <tr class="options__new">
                    <td><mark>to_min</mark><div>data-to-min</div></td>
                    <td>min</td>
                    <td>number</td>
                    <td>右手柄拖动的最小值</td>
                </tr>
                <tr class="options__new">
                    <td><mark>to_max</mark><div>data-to-max</div></td>
                    <td>max</td>
                    <td>number</td>
                    <td>设置左手柄拖动的最大值</td>
                </tr>


                <tr>
                    <td><mark>prettify_enabled</mark><div>data-prettify-enabled</div></td>
                    <td>true</td>
                    <td>boolean</td>
                    <td>设置长数字的可读性。 10000000 → 10 000 000</td>
                </tr>
                <tr class="options__new">
                    <td><mark>prettify_separator</mark><div>data-prettify-separator</div></td>
                    <td>" "</td>
                    <td>string</td>
                    <td>设置长数字的可读性。 10 000, 10.000, 10-000 и т.п.</td>
                </tr>
                <tr class="options__new options__step">
                    <td><mark>prettify</mark><div>—</div></td>
                    <td>null</td>
                    <td>function</td>
                    <td>
                        设置你自己的美化功能。可以是任何东西。
                    </td>
                </tr>

                <tr class="options__new options__step">
                    <td><mark>force_edges</mark><div>data-force-edges</div></td>
                    <td>false</td>
                    <td>boolean</td>
                    <td>强制文字显示在控件内部</td>
                </tr>

                <tr class="options__new">
                    <td><mark>keyboard</mark><div>data-keyboard</div></td>
                    <td>false</td>
                    <td>boolean</td>
                    <td>启用键盘操作. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.</td>
                </tr>
                <tr class="options__new options__step">
                    <td><mark>keyboard_step</mark><div>data-keyboard-step</div></td>
                    <td>5</td>
                    <td>number</td>
                    <td>键盘操作移动的步数。</td>
                </tr>

                <tr>
                    <td><mark>grid</mark><div>data-grid</div></td>
                    <td>false</td>
                    <td>boolean</td>
                    <td>启用刻度尺</td>
                </tr>
                <tr>
                    <td><mark>grid_margin</mark><div>data-grid-margin</div></td>
                    <td>true</td>
                    <td>boolean</td>
                    <td>设置刻度尺左右两边是否有边距</td>
                </tr>
                <tr class="options__new">
                    <td><mark>grid_num</mark><div>data-grid-num</div></td>
                    <td>4</td>
                    <td>number</td>
                    <td>设置刻度单元数</td>
                </tr>
                <tr class="options__new options__step">
                    <td><mark>grid_snap</mark><div>data-grid-snap</div></td>
                    <td>false</td>
                    <td>boolean</td>
                    <td>刻度尺单元网格滑块步（步参数）。如果启用，grid_num不会用。</td>
                </tr>

                <tr>
                    <td><mark>hide_min_max</mark><div>data-hide-min-max</div></td>
                    <td>false</td>
                    <td>boolean</td>
                    <td>隐藏最大值最小值的显示</td>
                </tr>
                <tr class="options__step">
                    <td><mark>hide_from_to</mark><div>data-hide-from-to</div></td>
                    <td>false</td>
                    <td>boolean</td>
                    <td>隐藏左右手柄上的数值</td>
                </tr>

                <tr>
                    <td><mark>prefix</mark><div>data-prefix</div></td>
                    <td>—</td>
                    <td>string</td>
                    <td>设置值的前缀。比如将数量100设置为:$100</td>
                </tr>
                <tr>
                    <td><mark>postfix</mark><div>data-postfix</div></td>
                    <td>—</td>
                    <td>string</td>
                    <td>值设置后缀。比如将数值100设置为：100K</td>
                </tr>
                <tr>
                    <td><mark>max_postfix</mark><div>data-max-postfix</div></td>
                    <td>—</td>
                    <td>string</td>
                    <td>给最大值设置后缀</td>
                </tr>
                <tr class="options__step">
                    <td><mark>input_values_separator</mark><div>data-input-values-separator</div></td>
                    <td>" ; "</td>
                    <td>string</td>
                    <td>设置input中两个值的分隔符。</td>
                </tr>

                <tr class="options__step">
                    <td><mark>disable</mark><div>data-disable</div></td>
                    <td>false</td>
                    <td>boolean</td>
                    <td>禁用。</td>
                </tr>

                <tr>
                    <td><mark>onStart</mark><div>—</div></td>
                    <td>null</td>
                    <td>function</td>
                    <td>回调函数，滑动的时候启动。</td>
                </tr>
                <tr>
                    <td><mark>onChange</mark><div>—</div></td>
                    <td>null</td>
                    <td>function</td>
                    <td>回调函数，值发生变化的时候启动。</td>
                </tr>
                <tr>
                    <td><mark>onFinish</mark><div>—</div></td>
                    <td>null</td>
                    <td>function</td>
                    <td>回调函数，一次滑动结束的时候启动。</td>
                </tr>
                <tr class="options__new">
                    <td><mark>onUpdate</mark><div>—</div></td>
                    <td>null</td>
                    <td>function</td>
                    <td>回调函数。触发<code>update</code> 或者 <code>reset</code>方式的时候启用。</td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>
{{/inline}}

{{#*inline "appScript"}}
    <script type="text/javascript">
        pagurian.call("modules/slider/app", function(app) {
            app.page.index();
        });
    </script>
{{/inline}}

{{/base}}
